<!--  -->
<template>
<div class="container">
    <!-- 左边盒子 -->
    <div class="leftBox">
        <div class="topBox">
            <el-form ref="form" :inline="true" :model="search" label-width="80px" size="mini">
                <el-form-item>
                    <el-input v-model="search.name" placeholder="请输入搜索内容" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="searchFun">搜 索</el-button>
                    <el-button type="primary" size="mini" @click="getarea">待分配床位</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="name" label="床位名称" align="center" />
            <el-table-column prop="location" label="地址" align="center" />
            <el-table-column prop="status" label="状态" show-overflow-tooltip align="center" />
        </el-table>
        <el-pagination class="controlBox" style="margin-top: 20px" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pageSize" layout=" sizes, prev, pager, next, jumper" :total="tableData.length">
        </el-pagination>
    </div>
    <!-- 右边盒子 -->
    <div class="rightBox">
        <el-form ref="form" :model="form">
            <el-form-item label="区域名称" prop="areaName" style="align-items: center">
                <el-col :span="11">
                    <el-input v-model="form.areaName" />
                </el-col>
            </el-form-item>
        </el-form>

        <div class="app-container">
            <div class="patrol">
                <div>巡逻间隔：</div>
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addColumn">新增</el-button>
            </div>
            <el-table :data="timeList">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column label="开始巡逻时间" width="150" :show-overflow-tooltip="true" prop="beginTime">
                    <template slot-scope="scope">
                        <el-col :span="30">
                            <el-time-picker placeholder="选择时间" v-model="scope.row.beginTime" style="width: 100%;" value-format="HH:mm:ss"></el-time-picker>
                        </el-col>
                    </template>
                </el-table-column>
                <el-table-column label="结束巡逻时间" width="150" :show-overflow-tooltip="true" prop="endTime">
                    <template slot-scope="scope">
                        <el-col :span="30">
                            <el-time-picker placeholder="选择时间" v-model="scope.row.endTime" style="width: 100%;" value-format="HH:mm:ss"></el-time-picker>
                        </el-col>
                    </template>
                </el-table-column>

                <el-table-column label="间隔时间" prop="intervalTime" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-input placeholder="" v-model="scope.row.intervalTime"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteRow(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="listTop" style="margin-top: 20px">
            <div>已关联床位</div>
        </div>
        <!-- <el-checkbox-group v-model="checkList">
            <el-checkbox v-for="(item,index) in checkListData" :key="index" :label="item.bedName"></el-checkbox>
         </el-checkbox-group> -->
        <el-tag v-for="(item, index) in checkListData" :key="index" :disable-transitions="false">
            {{item.name}}
        </el-tag>
        <div class="submitBox">
            <el-button type="primary" size="mini" @click="Addarea">确认分配</el-button>
        </div>
    </div>

</div>
</template>

<script>
import {
    addArea,
    getDistribution,
    getarea,
    getsearchDistribution
} from '../../../../api/user.js'
export default {
    components: {},
    data() {
        return {
            currentPage: 1, //  初始页
            pageSize: 10, //  每页的数据
            total: 0, //总数
            search: {
                name: '' // 搜索
            },
            form: {
                areaName: ''
            },
            tableData: [],
            checkList: ['选中且禁用', '复选框 A'],
            checkListData: [], // 关联床位
            awarry: [],
            id: '',
            timeList: [], // 时间列表
        }
    },
    computed: {},
    watch: {},
    created() {

    },
    mounted() {},
    methods: {
        //时间编辑
        addColumn() {
            
            let aa = {
                beginTime: '',
                endTime: '',
                intervalTime: '',

            };
            this.timeList.push(aa);
        },
        deleteRow(index) {
            console.log(this.timeList);
            this.timeList.splice(index, 1);
        },
        searchFun() {
            console.log(this.search)
        },
        addList() {},
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row)
                })
            } else {
                this.$refs.multipleTable.clearSelection()
            }
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
            this.pageSize = size;
            this.getarea();
            console.log(this.pageSize); //每页下拉显示数据
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
            this.getarea();
            console.log(this.currentPage); //点击第几页
        },
        // 点击添加到关联床位
        handleSelectionChange(val) {
            this.multipleSelection = val
            if (val) {
                var arr = []
                this.checkListData = arr.concat(val) // 选中添加到数组里
            } else {
                this.checkListData.splice(this.checkListData.indexOf(val), 1) // 取消
            }
        },
        handleSelection(val) {
            this.multipleSelections = val
        },
        // 获取未分配的床位
        getarea() {
            getDistribution()
                .then((res) => {
                    console.log(res);
                    this.tableData = res.data.beds
                    console.log(this.tableData)
                })
                .catch((err) => {})
        },
        // 根据id搜索未分配床位
        searchFun() {
            getsearchDistribution(this.search.name).then((res) => {
                // console.log(res);
                this.tableData = res.data.beds
            })
        },

        // 添加区域
        Addarea() {
            this.checkListData.map((item) => {
                this.awarry.push(item.id)
                console.log(this.awarry)
            })
            addArea(this.form.areaName, this.timeList, this.awarry) //this.awarry
                .then((res) => {
                    console.log(res)
                    this.$message({
                        type: 'success',
                        message: '新增成功!'
                    })
                    this.$router.push({
                        name: 'areaSet'
                    })
                })
                .catch((err) => {
                    this.$message('新增失败')
                })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    padding: 20px;
    display: flex;
    justify-content: space-between;

    .leftBox {
        width: 48%;
    }

    .rightBox {
        width: 48%;

        .listTop {
            font-size: 16px;
            color: #666;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 10px;
        }

        .submitBox {
            margin-top: 23px;
            display: flex;
            justify-content: center;
        }
    }

    .patrol {
        display: flex;
        justify-content: space-between;
        align-items: center
    }
}
</style>
